<!--
 * @Description: 进度图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020年9月1日 16:51:18
 * @LastEditTime: 2020-09-08 14:48:52
-->
<template>
    <ScreenContainer class="progressCharts demo">
        <!-- 进度图1 -->
        <div class="box">
            <progressChart1 :staticData="staticData"
                            title="进度图1"
                            :colors="['#1d88eb','#5ef5ff']" />
        </div>
        <!-- 进度图6 -->
        <div class="box">
            <progressChart6 :staticData="staticData"
                            titleText="进度图6"
                            color="#1d88eb" />
        </div>
        <!-- 进度图3 -->
        <div class="box">
            <progressChart3 :staticData="staticData"
                            titleText="进度图3"
                            titleSubText="共500个"
                            color="#1d88eb" />
        </div>
        <!-- 进度图4 -->
        <borderBox4 class="box"
                    :color="['#1d88eb','#5ef5ff']">
            <progressChart4 :staticData="staticData2"
                            title="进度图4"
                            :colors="['#1d88de','#555']" />
        </borderBox4>
        <!-- 进度图5 -->
        <div class="box">
            <progressChart5 :staticData="staticData3" />
        </div>
        <!-- 进度图2 -->
        <div class="box">
            <progressChart2 :staticData="staticData2"
                            title="进度图2"
                            :colors="['#fdf914','#b6f795']" />
        </div>
    </ScreenContainer>
</template>

<script>
// import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import progressChart1 from '@/components/charts/custom/progressChart1.vue' //进度图1
import progressChart2 from '@/components/charts/custom/progressChart2.vue' //进度图2
import progressChart3 from '@/components/charts/custom/progressChart3.vue' //进度图3
import progressChart4 from '@/components/charts/custom/progressChart4.vue' //进度图4
import progressChart5 from '@/components/charts/custom/progressChart5.vue' //进度图5
import progressChart6 from '@/components/charts/custom/progressChart6.vue' //进度图6
import borderBox4 from '@/components/borderBox/borderBox4.vue' //边框4
export default {
    name: 'progressCharts',
    components: {
        progressChart1,
        progressChart2,
        progressChart3,
        progressChart4,
        progressChart5,
        progressChart6,
        ScreenContainer,
        borderBox4,
    },
    data() {
        return {
            // getData, //api方法
            staticData: 60,
            staticData2: [
                { name: '低压居民', value: 15 },
                { name: '低压非居民', value: 25 },
                { name: '高压单电源', value: 87 },
                { name: '高压双电源', value: 38 },
            ],
            staticData3: [
                {
                    name: '装备制造',
                    value: 54,
                },
                {
                    name: '现代材料',
                    value: 44,
                },
                {
                    name: '新能源',
                    value: 35,
                },
                {
                    name: '新一代信息技术',
                    value: 30,
                },
                {
                    name: '现代材料2',
                    value: 44,
                },
                {
                    name: '新能源2',
                    value: 35,
                },
                {
                    name: '新一代信息技术2',
                    value: 30,
                },
                {
                    name: '商贸物流2',
                    value: 20,
                },
            ],
        }
    },
    mounted() {
        clearInterval(this.$store.state.timer2)
        this.$store.state.timer2 = setInterval(() => {
            //自动切换数据
            if (this.staticData == 100) {
                this.staticData = 0
            }
            this.staticData += 5
        }, 2000)
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        width: 33.3333%;
        height: 50%;
    }
}
</style>
